<template>
  <div>
    <div class="session-list" v-if="flag">
      <div class="session-list-head">
        {{ title }}
        <div
          style="float: right; margin-right: 10px"
          v-if="IsFilter === 'true'"
        >
          <el-button plain size="small" @click="select">筛选</el-button>
        </div>
      </div>
      <div class="session-list-main">
        <slot></slot>
      </div>
    </div>
    <div class="session-list" v-else>
      <div class="session-list-plus-head">
        <el-button plain size="small" @click="back">
          <i class="el-icon-arrow-left"></i> 返回</el-button
        >
        <span>
          <el-button plain size="small" @click="back">开始筛选</el-button>
        </span>
      </div>
      <div class="session-list-plus-main">
        <div style="margin-bottom: 15px"><my-date width="280"></my-date></div>
        <div style="margin-bottom: 15px">
          <my-search ph="请输入关键词搜索" width="280"></my-search>
        </div>
        <div style="margin-bottom: 15px">
          <my-select width="280" ph="全部客服" :items="kefuItems"></my-select>
        </div>
        <div style="margin-bottom: 15px">
          <my-select width="280" ph="全部渠道" :items="sourceItems"></my-select>
        </div>
        <div style="margin-bottom: 15px">
          <my-select width="280" ph="全部评价" :items="pingjiaItems"></my-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyDate from "@/components/MyInput/MyDate";
import MySelect from "@/components/MyInput/MySelect";
import MySearch from "@/components/MyInput/MySearch";
export default {
  props: ["title", "IsFilter"],
  components: {
    MyDate,
    MySelect,
    MySearch,
  },
  data() {
    return {
      flag: true,
      kefuItems: [
        {
          label: "王美美",
          value: 0,
        },
        {
          label: "七尾",
          value: 1,
        },
        {
          label: "李想",
          value: 2,
        },
        {
          label: "王志",
          value: 3,
        },
      ],
      sourceItems: [
        {
          label: "全部渠道",
          value: 0,
        },
        {
          label: "手动录入",
          value: 1,
        },
        {
          label: "即时聊天",
          value: 2,
        },
        {
          label: "客户管理",
          value: 3,
        },
      ],
      pingjiaItems: [
        {
          label: "全部评价",
          value: 0,
        },
        {
          label: "好评",
          value: 1,
        },
        {
          label: "中评",
          value: 2,
        },
        {
          label: "差评",
          value: 3,
        },
        {
          label: "未评论",
          value: 4,
        },
      ],
    };
  },
  methods: {
    select() {
      this.flag = false;
      console.log(this.flag);
    },
    back() {
      this.flag = true;
    },
  },
};
</script>

<style>
.session-list {
  height: 700px;
  max-height: 700px;
  width: 300px;
  background-color: white;
  border-radius: 4px;
}

.session-list-head {
  height: 64px;
  line-height: 64px;
  padding-left: 20px;
  font-size: 1em;
  border-bottom: 1px solid rgb(242, 242, 242);
}

.session-list-plus-head {
  padding: 10px 20px;
  font-size: 1em;
  border-bottom: 1px solid rgb(242, 242, 242);
  display: flex;
  justify-content: space-between;
}

.session-list-plus-head span .el-button {
  background-color: #006eff;
  color: #ffffff;
}

.session-list-main {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

.session-list-main::-webkit-scrollbar {
  display: none;
}

.session-list-plus-main {
  padding: 20px;
}
</style>